<html>
	<head>		
 		<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/redmond/jquery-ui.css">
		<link rel="stylesheet" href="../css/jquery-ui-plugins-groupbox.css" type="text/css"/>
		
		<style type="text/css">
			body {
				font-size: 12px;
			}
			
			.blue {
				border: 1px solid blue;
			}
			
			.red {
				border: 1px solid red;
			}
		</style>
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>				
		<script type="text/javascript" src="../js/jquery-ui-plugins-groupbox.js"></script>		
	</head>
	<body>
		<div>
			<div style="float: right; width: 920px; margin-right: 200px;">
				<fieldset id="options" style="float: left;">
					<legend>Options</legend>
					<div>
						<label>Items List 1</label>
						<input id="itemsList1" type="text"/>
					</div>
					
					<div>
						<label>Label List 1</label>
						<input id="labelList1" type="text" value="From"/>
					</div>
					
					<div>
						<label>CSS Class List 1</label>
						<select id="cssClassList1">
							<option value="none">None</option>
							<option value="red">Red</option>
							<option value="blue">Blue</option>					
						</select>
					</div>
					
					<div>
						<label>Items List 2</label>
						<input id="itemsList2" type="text"/>
					</div>
					
					<div>
						<label>Label List 2</label>
						<input id="labelList2" type="text" value="To"/>
					</div>
					
					<div>
						<label>CSS Class List 2</label>
						<select id="cssClassList2">
							<option value="none">None</option>
							<option value="red">Red</option>
							<option value="blue">Blue</option>					
						</select>
					</div>
					
					<div>
						<label>Width</label>
						<input id="width" type="text" value="300px"/>
					</div>
					
					<div>
						<label>Height</label>
						<input id="height" type="text" value="500px"/>
					</div>
					
					<div>
						<label>ID Attr</label>
						<input id="idAttr" type="text" value="key"/>
					</div>
					
					<div>
						<label>Label Attr</label>
						<input id="labelAttr" type="text" value="label"/>
					</div>
					
					<div>
						<label>Selectable</label>
						<select id="selectable">
							<option>true</option>
							<option>false</option>
						</select>
					</div>
					
					<div>
						<label>Item Size</label>
						<select id="itemSize">
							<option value="xsmall">X-Small</option>
							<option value="small">Small</option>
							<option value="medium">Medium</option>
							<option value="large">Large</option>
							<option value="xlarge">X-Large</option>
						</select>
					</div>
					
					<div>
						<label>Button Size</label>
						<select id="buttonSize">
							<option value="xsmall">X-Small</option>
							<option value="small">Small</option>
							<option value="medium">Medium</option>
							<option value="large">Large</option>
							<option value="xlarge">X-Large</option>
						</select>
					</div>
					
					<div>
						<label>Item Style</label>
						<input id="itemStyle" type="text" value=""/>
					</div>
					
					<div>
						<label>Button Style</label>
						<input id="buttonStyle" type="text" value=""/>
					</div>
					
					<button id="setOptionsButton">Set Options</button>
				</fieldset>
				<fieldset style="float: right; width: 200px;">
					<legend>Events</legend>
					<div>
						<label>Before Remove Events</label>
						<ul id="beforeRemoveEventList"></ul>
					</div>
					<div>
						<label>After Remove Events</label>
						<ul id="afterRemoveEventList"></ul>
					</div>
					<div>
						<label>Before Add Events</label>
						<ul id="beforeAddEventList"></ul>
					</div>
					<div>
						<label>After Add Events</label>
						<ul id="afterAddEventList"></ul>
					</div>								
					<div>
						<label>Before Move Events</label>
						<ul id="beforeMoveEventList"></ul>
					</div>
					<div>
						<label>After Move Events</label>
						<ul id="afterMoveEventList"></ul>
					</div>
					<div>
						<label>Disable Events</label>
						<ul id="disableEventList"></ul>
					</div>
					<div>
						<label>Enable Events</label>
						<ul id="enableEventList"></ul>
					</div>
				</fieldset>
				<fieldset style="float: left; width: 400px;">
					<legend>Methods</legend>		
					<div>
						<button id="enable">Enable</button>
					</div>
					<div>
						<button id="disable">Disable</button>
					</div>			
					<div>
						<label>List Number</label>
						<select id="getItemsListNumber">
							<option>1</option>
							<option>2</option>
						</select>
					</div>
					
					<div>
						<button id="getItems">Get Items</button>
					</div>
					
					<div>
						<button id="setItems">Set Items</button>
					</div>
					
					<div>
						<button id="getSelected">Get Selected</button>
					</div>
					
					<div>
						<button id="setSelected">Set Selected</button>
						<label>Clear Selections</label><input id="clearSelected" type="checkbox"/>
						<label>Pass Objects</label><input id="passObjects" type="checkbox"/>						
					</div>
					
					<div>
						<button id="addItem">Add Item</button>
					</div>
					
					<div>						
						<button id="removeItem">Remove Item</button>
						<label>Item ID</label>
						<input id="removeItemId" type="text"/>
					</div>
					
					<div>
						<button id="destroy">Destroy</button>
					</div>		
					
					<div>
						<button id="genDocs">Generate Docs</button>
					</div>			
					
				</fieldset>		
			</div>
				
			<div id="myGroupbox"></div>						
			<div id="emptyGroupbox"></div>						
		</div>		
	</body>
	
	<script type="text/javascript">		
		
		$(function() {		
			var itemsList1 = [];
			var itemsList2 = [];			
			var animals = [];			
			animals.push({"key": 1, "label": "Ape"});
			animals.push({"key": 2, "label": "Bear"});
			animals.push({"key": 3, "label": "Cat"});
			animals.push({"key": 4, "label": "Dog"});
			animals.push({"key": 5, "label": "Elephant"});
			animals.push({"key": 6, "label": "Ferret"});
			animals.push({"key": 7, "label": "Gorilla"});
			animals.push({"key": 8, "label": "Hamster"});
			animals.push({"key": 9, "label": "Koala"});
			animals.push({"key": 10, "label": "Llama"});
			animals.push({"key": 11, "label": "Mouse"});
			animals.push({"key": 12, "label": "Ostrich"});
			animals.push({"key": 13, "label": "Panda"});
			animals.push({"key": 14, "label": "Rhinoceros"});
			animals.push({"key": 15, "label": "Tiger"});
			
			for(var i = 1; i <= 1000; i++) {
				var item = {"key": i, "label": "Item " + i};
				
				if(i % 7 == 0) {
					item.selected = true;						
				}
				
				if(i <= 500) {
					itemsList1.push(item);
				} else {
					itemsList2.push(item);
				}
			}
			$('button').button();							
			
			$('#myGroupbox').groupbox({
				"idAttr": "key",
				"labelAttr": "label",
				"labelList1": "Animals",
				"itemsList1": animals,
				"labelList2": "Good Pets",
				//"itemsList1": itemsList1,
				//"itemsList2": itemsList2,
				"width": "200",
				"height": "200",		
				//"buttonStyle": {"border": "2px solid green", "font-weight": "bold"},
				//"itemStyle": {"border": "2px solid blue", "font-weight": "bold"},
				"beforeRemove": function(event, data) {
					$('#beforeRemoveEventList').append('<li>Removing ' + data.item.label + '</li>');
				},
				"afterRemove": function(event, data) {
					$('#afterRemoveEventList').append('<li>' + data.item.label + ' removed</li>');
				},
				"beforeAdd": function(event, data) {
					$('#beforeAddEventList').append('<li>Adding ' + data.item.label + '</li>');
				},
				"afterAdd": function(event, data) {
					$('#afterAddEventList').append('<li>' + data.item.label + ' added</li>');
				},
				"beforeMove": function(event, data) {
					$('#beforeMoveEventList').append('<li>Moving ' + data.item.label + '</li>');
				},
				"afterMove": function(event, data) {
					$('#afterMoveEventList').append('<li>' + data.item.label + ' moved</li>');
				},
				"disable": function(event, data) {
					$('#disableEventList').append('<li>disable event</li>');
				},
				"enable": function(event, data) {
					$('#enableEventList').append('<li>enable event</li>');
				},
				"create": function() {
					console.log("created!!");
				},
			});	
			
			$('#setOptionsButton').click(function() {			
				$('#options input, #options select').each(function() {
					var $input = $(this);
					var id = $input.attr('id');						
					var value = $input.val();
					
					if(value) {
						$('#myGroupbox').groupbox('option', id, $input.val());
					}						
				});					
			});
			
			$('#enable').click(function() {
				$('#myGroupbox').groupbox('enable');
			});
			
			$('#disable').click(function() {
				$('#myGroupbox').groupbox('disable');
			});
			
			$('#getItems').click(function() {
				var items = $('#myGroupbox').groupbox('getItems', $('#getItemsListNumber').val());
				
				for(var i = 0; i < items.length; i++) {
					console.log(items[i].label);
				}	
			});
			
			$('#setItems').click(function() {
				var items = [];
				
				for(var i = 1; i <= 10; i++) {
					items.push({"key": i, "label": "Item " + i});
				}
				
				$('#myGroupbox').groupbox('setItems', $('#getItemsListNumber').val(), items);
			});
			
			$('#getSelected').click(function() {
				var items = $('#myGroupbox').groupbox('getSelected',  $('#getItemsListNumber').val());
			
				for(var i = 0; i < items.length; i++) {
					console.log(items[i].label);
				}	
			});
			
			$('#setSelected').click(function() {
				var listNumber = $('#getItemsListNumber').val();
				var items = $('#myGroupbox').groupbox('getItems', listNumber);				
				var selectedItems = [];
				var passObjects = $('#passObjects').is(':checked')
				
				for(var i = 0; i < items.length; i+= 3) {
					
					if(passObjects) {
						selectedItems.push(items[i]);
					} else {
						selectedItems.push(items[i].key);
					}				
				}	

				$('#myGroupbox').groupbox('setSelected', $('#getItemsListNumber').val(), selectedItems, $('#clearSelected').is(':checked'));
			});
			
			$('#addItem').click(function() {
				var listNumber = $('#getItemsListNumber').val();
				var items = $('#myGroupbox').groupbox('getItems', listNumber);
				var itemId = items.length + 1;
				$('#myGroupbox').groupbox('addItem', listNumber, {"key": itemId, "label": "New Item " + itemId});
			});
			
			$('#removeItem').click(function() {
				$('#myGroupbox').groupbox('removeItem', $('#getItemsListNumber').val(), $('#removeItemId').val());
			});
			
			$('#destroy').click(function() {
				$('#myGroupbox').groupbox('destroy');
			});		
			
			$('#genDocs').click(function() {
				var $emptyGroupbox = $('#emptyGroupbox').groupbox();
				var groupbox = $('#emptyGroupbox').data("groupbox");
				var options = new Array();
				var methods = new Array();
				
				for(var property in groupbox) {
					if(property == 'options') {
					  
						var optionsObject = groupbox[property];
						
						for(var option in optionsObject) {
							options.push({'name': option, 'value': optionsObject[option]});
						}
					} else if(property.charAt(0) != '_') {
						methods.push({'name': property, 'value': groupbox[property]});
					}
				}
				
				options.sort(sortByName);
				methods.sort(sortByName);
				
				console.log('-----OPTIONS-----');
				for(var i = 0; i < options.length; i++) {
					console.log(options[i].name + ' = ' + options[i].value + ', ' + typeof options[i].value);
				}
				
				console.log('-----METHODS-----');
				for(var i = 0; i < methods.length; i++) {
					console.log(methods[i].name + ' = ' + methods[i].value + ', ' + typeof methods[i].value);
				}
			});
		});
		
		function sortByName(object1, object2) {
			var result = 0;
			
			if (object1.name < object1.name) {
				result =  -1;	
			}
			    
			if (object1.name > object1.name) {
				result = 1;	
			}
			   
			 return result;
		}
		
	</script>
</html>
